<route lang="json5">
{
  style: {
    navigationBarTitleText: '详细信息',
    navigationStyle: 'custom',
    // #ifdef MP-ALIPAY
    enablePullDownRefresh: false,
    'mp-alipay': {
      allowsBounceVertical: 'NO',
      transparentTitle: 'always',
      titlePenetrate: 'YES',
      defaultTitle: '',
    },
    // #endif
  },
}
</route>
<template>
  <CustomNavbar :title="'用户信息'" />
  <scroll-view :scroll-top="scrollTop" :scroll-y="true" class="scroll-Y">
    <view class="person-msg" :style="{ paddingTop: safeAreaInsets?.top + 'px' }">
      <uni-forms class="form" :modelValue="form">
        <uni-forms-item label="头像" name="avatar">
          <view class="head">
            <!-- <image :src="form.avatar || userInfoRef.defaultImage" mode=""></image> -->
            <view>
              <uni-file-picker
                ref="avaterPickerRef"
                :value="[{ name: '', extname: '', url: form.avatar || userInfoRef.defaultImage }]"
                limit="1"
                :del-icon="false"
                disable-preview
                :imageStyles="imageStyles"
                file-mediatype="image"
                :disabled="true"
              ></uni-file-picker>
            </view>
          </view>
        </uni-forms-item>

        <uni-forms-item label="昵称" name="nickname">
          <uni-easyinput
            type="text"
            v-model="form.nickname"
            placeholder="请输入昵称"
            :disabled="true"
          />
        </uni-forms-item>
        <uni-forms-item label="性别" name="sex" v-model="form.sex">
          <view>
            <radio-group>
              <label class="radio">
                <radio value="1" :checked="form.sex === '1'" color="#ac9dd4" :disabled="true" />
                男
              </label>
              <label class="radio">
                <radio value="0" :checked="form.sex === '0'" color="#ac9dd4" :disabled="true" />
                女
              </label>
            </radio-group>
          </view>
        </uni-forms-item>
        <uni-forms-item label="生日" name="birthday">
          <picker mode="date" :value="form.birthday" :disabled="true">
            <view class="uni-input">{{ form.birthday }}</view>
          </picker>
        </uni-forms-item>
        <uni-forms-item label="城市" name="city">
          <picker mode="region" :value="form.city?.split(' ')" :disabled="true">
            <view class="uni-input">{{ form.city }}</view>
          </picker>
        </uni-forms-item>
        <!-- <uni-forms-item label="手机号" name="phone">
        <uni-easyinput type="text" v-model="form.phone" :disabled="true" />
      </uni-forms-item> -->
      </uni-forms>

      <view class="uni-margin-wrap">
        <view class="type-box">
          <view class="text" v-for="(item, index) in typeList" :key="item" @tap="clickType(index)">
            <text>{{ item }}</text>
          </view>
        </view>
        <uni-transition
          ref="cursor"
          custom-class="custom-transition"
          :show="true"
          mode-class="slide-left"
        />
        <swiper class="swiper" :current="activeIndex" @change="changeSwiper">
          <swiper-item class="swiper-item" v-for="(pageDataItems, index) in dataList" :key="index">
            <scroll-view :scroll-top="scrollTop" :scroll-y="true" class="scroll-Y">
              <!-- 书籍 -->
              <uni-card
                v-if="activeIndex == 0"
                v-for="(recordItem, index) in pageDataItems"
                :title="'《' + recordItem.bookName + '》'"
                :isFull="true"
                :extra="recordItem.statusStr"
                :thumbnail="recordItem.bookAvatar"
                :key="recordItem.id"
              ></uni-card>

              <!-- 小组 -->
              <uni-collapse accordion v-if="activeIndex == 1">
                <uni-collapse-item
                  v-for="(group, groupIndex) in pageDataItems"
                  :key="group.id"
                  :title="group.groupName + '(' + group.memberCount + ')'"
                  :thumb="group.groupAvatar"
                >
                  <view class="group-content">
                    <view class="group-content-view">
                      <view class="group-content-view-item">
                        <text class="group-content-view-item-title">组长:</text>
                        <image
                          :src="group.masterUserAvatar"
                          mode="scaleToFill"
                          style="
                            width: 60rpx;
                            height: 60rpx;
                            border-radius: 50%;
                            margin-right: 10rpx;
                          "
                        />
                        <text class="group-content-view-item-content">
                          {{ group.masterUserName }}
                        </text>
                      </view>
                      <view class="separator"></view>
                      <view class="group-content-view-item">
                        <text class="group-content-view-item-title">口号:</text>
                        <text class="group-content-view-item-content">
                          {{ group.description }}
                        </text>
                      </view>
                      <view class="separator"></view>
                      <view class="group-content-view-item">
                        <text class="group-content-view-item-title">人数:</text>
                        <text class="group-content-view-item-content">
                          {{ group.memberCount }}
                        </text>
                      </view>
                      <view class="separator"></view>
                      <view class="group-content-view-item">
                        <button
                          class="mini-btn optBtn"
                          hover-class="button-active"
                          size="mini"
                          @tap="joinGroup(group)"
                        >
                          加入
                        </button>
                      </view>
                      <view class="separator" style="margin-bottom: 35rpx"></view>
                    </view>
                  </view>
                </uni-collapse-item>
              </uni-collapse>
            </scroll-view>
          </swiper-item>
        </swiper>
      </view>
    </view>
  </scroll-view>
</template>

<script lang="ts" setup>
import CustomNavbar from '@/components/CustomNavbar.vue'
import { useUserStore } from '@/store'
import { userInfoApi } from '@/service/user'
import { IUserInfo } from '@/types/user'
import { joinApi } from '@/service/group'

let userInfoRef = useUserStore()
let form = ref<IUserInfo>({})
let avaterPickerRef = ref()

let activeIndex = ref(1)
const cursor = ref()

let dataList = ref<any[][]>()

const typeList = ['书籍', '小组']

let scrollTop = ref(0)
const isTriggered = ref(false)

const props = defineProps<{
  id: number
  activeIndex?: number
}>()

onLoad(async () => {
  console.log(props.activeIndex)
  const userInfoRes = await userInfoApi(props.id)
  form.value = userInfoRes.data
  console.log('userInfoRes', userInfoRes)
  dataList.value = [userInfoRes.data.bookList, userInfoRes.data.groupList]
  activeIndex.value = props.activeIndex ? props.activeIndex : 0
  clickType(activeIndex.value)
})

const imageStyles = {
  width: 72,
  height: 72,
  border: {
    radius: '50%',
  },
}

const clickType = (index: number) => {
  activeIndex.value = index
  console.log(activeIndex.value)
  cursor.value.step(
    {
      translateX: activeIndex.value * 120 + '%',
    },
    {
      delay: 0,
      duration: 200,
      timingFunction: 'linear',
      needLayout: false,
      transformOrigin: '',
    },
  )
  cursor.value.run()
}

const changeSwiper = (ev) => {
  activeIndex.value = ev.detail.current
  console.log(activeIndex.value)
  cursor.value.step(
    {
      translateX: activeIndex.value * 120 + '%',
    },
    {
      delay: 0,
      duration: 200,
      timingFunction: 'linear',
      needLayout: false,
      transformOrigin: '',
    },
  )
  cursor.value.run()
}

const joinGroup = async (group: any) => {
  console.log('加入')
  const joinRes = await joinApi({ groupId: group.id, memberId: userInfoRef.userInfo.id })
  console.log(joinRes)
  if (joinRes.code == 0) {
    uni.showToast({ icon: 'none', title: '已申请加入' })
  }
}

// 获取屏幕安全区域
const { safeAreaInsets } = uni.getSystemInfoSync()
console.log(safeAreaInsets)
</script>

<style lang="scss">
.head {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  font-size: 24rpx;
  color: #909399;
}

.uni-forms {
  padding: 0;
  margin-top: 10rpx;
  background-color: #ffffff;
  .uni-forms-item {
    height: 110rpx;
    padding: 0 20rpx;
    line-height: 110rpx;
  }
}
.form {
  background-color: #ffffff;
}
.bottom {
  position: fixed;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
  width: 100%;
  > .submit {
    width: 40%;
    height: 80rpx;
    line-height: 80rpx;
    color: #fff;
    text-align: center;
    background-color: $main-color;
  }
}

.radio {
  margin-right: 50rpx;
}

.quiteLoginOut {
  background-color: $font-color-base !important;
  // color: #ff6b35 !important;
}

.uni-margin-wrap {
  width: 690rpx;
  width: 100%;
}

.type-box {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  margin-top: 10rpx;
  font-size: 33rpx;
}

.type {
  border-bottom: 1px solid red;
}

.cursor {
}

.text {
  width: 25%;
  text-align: center;
}

/* 如果使用 scss 需要使用 /deep/  */
.custom-transition {
  position: absolute;
  width: 46%;
  height: 7rpx;
  background-color: $main-color;
  margin-top: 7rpx;
}

.swiper {
  margin-top: 10rpx;
  height: calc(100vh - var(--window-top));

  .swiper-item {
    .uni-body {
      font-size: 32rpx;
      color: #a5a5a5;
    }
  }
}
.group-content {
  text-align: center;
  padding: 0rpx 80rpx;
  font-size: 30rpx;
  .group-content-view {
    width: 90%;
    border-bottom-left-radius: 10rpx;
    border-bottom-right-radius: 10rpx;
    display: flex;
    flex-direction: column;
    .group-content-view-item {
      width: 100%;
      text-align: left;
      height: 60rpx;
      line-height: 60rpx;
      .group-content-view-item-title {
        width: 30%;
        margin-right: 30rpx;
      }
      .group-content-view-item-content {
        padding-left: 20rpx;
        width: 70%;
      }
    }
  }
}
.demo-uni-row {
  margin-bottom: 10px;
  // 组件在小程序端display为inline
  display: block;
  font-size: 33rpx;
  padding: 30rpx 30rpx;
}
.demo-uni-row-view {
  background-color: #a5a5a5;
}
.demo-uni-row-text {
  font-size: 36rpx;
  text-align: left;
  align-items: left;
}
.separator {
  width: 100%;
  height: 1rpx;
  background-color: $main-color;
  opacity: 0.5;
  margin: 10rpx 0rpx;
}

.optBtn {
  width: 50%;
  color: #fff;
  font-size: 25rpx;
  background-color: $main-color-hight;
}
.button-active {
  background-color: $main-color; /* 点击时的背景颜色 */
}

.scroll-Y {
  width: 100%;
  height: calc(100vh - var(--window-top));
}
</style>
